<template>
    <div class="goods">
        <h3>
            商品
        </h3>
        <!-- <nuxt-link to="/goods/1?a=1&b=1">商品01</nuxt-link>
        <nuxt-link to="/goods/2?a=11&b=11">商品02</nuxt-link>
        <!-- 动态写入子路由 传入对象 -->
        <!-- <nuxt-link :to="{name:'goods-id',params:{id:3},query:{a:111,b:222}}">商品03</nuxt-link>
        <nuxt-link to="/goods/comment">评论</nuxt-link>
        <!-- 约定子路由的展示区 -->
        <!-- <nuxt/> -->
        <el-tabs tab-position="right" v-model="collectionName">
            <el-tab-pane label="关注" name="follow">
                <el-table :data="follow" style="width:100%" @row-click="getDetail">
                  <el-table-column label="标题" prop="title" width="180"></el-table-column>
                  <el-table-column label="编号" prop="id" width="180"></el-table-column>
                  <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="栏目" name="column">
                栏目
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default{
    name:"goods",
    // beforeRouteLeave(to,from,next){
    //     let al = window.confirm("是否要离开？");
    //     next(al);
    // },
    //页面meta配置
    head(){
        return {
            meta:[
                {name:'keywords',content:'商品列表_'+this.collectionName}
            ]
        }
    },
    asyncData({$axios}){//允许promis，并且会将读到的数据完成服务端渲染
        return Promise.all([
            $axios({url:'/api/banner'}),
            $axios({url:'/api/banner'})
        ]).then(
            ([follow,column])=>({follow:follow.data.data,column:column.data.data})
        );      
    },
    data:()=>({
        collectionName:'follow',
        // loading:true
    }),
    methods:{
        getDetail(row,clo,ev){
            console.log("row*******"+row);
            console.log("clo*******"+clo);
            console.log("ev*******"+ev);
            this.$router.push({name:'goods-id',params:{id:(row.id/1)},query:{collectionName:this.collectionName}});
        }
    },
    mounted(){
        this.$show();
    }
}
</script>